import React, { useEffect, useState } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { message } from 'antd';
import { getCurrentUserRole } from '../../api/userRole';

/**
 * 鉴权路由组件
 * 用于保护需要登录才能访问的路由
 * @param {Object} props
 * @param {React.ReactNode|Function} props.children - 子组件或根据用户角色返回组件的函数
 * @param {Array} props.allowedRoles - 允许访问的角色列表，如果为空则表示所有已登录用户都可访问
 * @returns {React.ReactNode}
 */
const AuthRoute = ({ children, allowedRoles = [] }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [userRole, setUserRole] = useState(null);
  const [loading, setLoading] = useState(true);
  const location = useLocation();

  useEffect(() => {
    // 检查是否有token
    const token = localStorage.getItem('token');
    if (!token) {
      setLoading(false);
      return;
    }

    // 获取用户信息和角色
    const fetchUserData = async () => {
      try {
        // 获取用户角色信息
        const roleResponse = await getCurrentUserRole();
        console.log('获取用户角色响应:', roleResponse); // 调试信息
        
        if (roleResponse && roleResponse.data) {
          // 检查角色信息的位置
          if (roleResponse.data.roles && roleResponse.data.roles.length > 0) {
            // 如果角色信息在roles数组中
            const roleName = roleResponse.data.roles[0].name;
            setUserRole(roleName);
            localStorage.setItem('userRole', roleName);
            console.log('从API获取到角色:', roleName); // 调试信息
          } else if (roleResponse.data.role) {
            // 如果角色信息在role字段中
            setUserRole(roleResponse.data.role);
            localStorage.setItem('userRole', roleResponse.data.role);
            console.log('从API获取到角色:', roleResponse.data.role); // 调试信息
          } else {
            // 如果API返回中没有找到角色信息，尝试从localStorage获取
            const userRoleFromStorage = localStorage.getItem('userRole');
            if (userRoleFromStorage) {
              setUserRole(userRoleFromStorage);
              console.log('从localStorage获取到角色:', userRoleFromStorage); // 调试信息
            }
          }
        } else {
          // 如果API调用失败，尝试从localStorage获取
          const userRoleFromStorage = localStorage.getItem('userRole');
          if (userRoleFromStorage) {
            setUserRole(userRoleFromStorage);
            console.log('从localStorage获取到角色:', userRoleFromStorage); // 调试信息
          }
        }
        
        setIsAuthenticated(true);
        setLoading(false);
      } catch (error) {
        console.error('获取用户信息失败:', error);
        // 如果API调用失败，尝试从localStorage获取
        const userRoleFromStorage = localStorage.getItem('userRole');
        if (userRoleFromStorage) {
          setUserRole(userRoleFromStorage);
          setIsAuthenticated(true);
        }
        setLoading(false);
      }
    };

    fetchUserData();
  }, []);

  if (loading) {
    // 加载状态，可以显示加载指示器
    return <div>加载中...</div>;
  }

  if (!isAuthenticated) {
    // 未认证，重定向到登录页面
    message.error('请先登录');
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  // 如果指定了允许的角色，且用户角色不在允许列表中
  if (allowedRoles.length > 0 && !allowedRoles.includes(userRole)) {
    message.error('您没有权限访问此页面');
    
    // 根据用户角色重定向到相应的首页
    if (userRole === 'admin') {
      return <Navigate to="/admin/dashboard" replace />;
    } else if (userRole === 'employee') {
      return <Navigate to="/employee/dashboard" replace />;
    } else if (userRole === 'candidate') {
      return <Navigate to="/candidate/dashboard" replace />;
    } else {
      return <Navigate to="/" replace />;
    }
  }

  // 认证通过，渲染子组件
  // 如果children是函数，则传入用户角色信息
  if (typeof children === 'function') {
    return children({ userRole });
  }
  
  // 否则直接渲染子组件
  return children;
};

export default AuthRoute;